<template>
  <a-card :body-style="{ padding: '24px 32px' }" :bordered="false">
    <icon-selector v-model="currentSelectedIcon" @change="handleIconChange" />

    <a-divider />
    <p>测试 IconSelector 组件 v-model 功能</p>
    <a-button @click="changeIcon('down')">
      改变 Icon-down
    </a-button>
    <a-divider type="vertical" />
    <a-button @click="changeIcon('cloud-download')">
      改变 Icon-cloud-download
    </a-button>
  </a-card>
</template>

<script lang="tsx">
import { Component, Vue } from 'vue-property-decorator'
import IconSelector from '@/components/IconSelector'

@Component({
  name: 'IconSelectorView',
  components: {
    IconSelector
  }
})
export default class IconSelectorView extends Vue {
  //data
  private currentSelectedIcon: string = 'pause-circle'

  constructor() {
    super()
  }

  // methods
  handleIconChange(icon: any) {
    console.log('change Icon', icon)
    this.$message.info(
      <span>
        选中图标 <code>{icon}</code>
      </span>
    )
  }
  changeIcon(type: string) {
    this.currentSelectedIcon = type
  }
}
</script>
